import React from 'react'

class Child extends React.Component {
  // constructor：构造函数，它是用来初始化class实例化对象的构造方法
  // 只要写了constructor，就一定要写super(props)去调用父类的构造函数
  constructor(props) {
    super(props)
    console.log('constructor')
    this.state = {
      num: 0,
    }
    // 可以做一些初始化工作
    // this.state = {
    //   num: 30,
    // }
    // this.textRef = createRef()
    // this.handleClick = this.handleClick.bind(this)
  }
  componentDidMount() {
    // componentDidMount：组件挂载完成的时候
    // 发送接口请求
    // 操作dom
    console.log('componentDidMount')
  }
  // 执行时机：组件更新（页面重新渲染）之后
  componentDidUpdate() {
    console.log('componentDidUpdate')
    // 不要直接在componentDidUpdate中调用setState
    // this.setState({
    //   num: 8,
    // })
  }

  handleClick = () => {
    this.setState({
      num: this.state.num + 1,
    })
  }
  render() {
    // render：渲染页面
    console.log('render')
    // 不要直接在render中调用setState
    // this.setState({
    //   num: 8,
    // })
    return (
      <>
        <h2>{this.state.num}</h2>
        <button onClick={this.handleClick}>点击我+1</button>
      </>
    )
  }
}
export default class App extends React.Component {
  render() {
    return (
      <>
        <Child></Child>
      </>
    )
  }
}
